<template>
    <headerTitle title="个人中心"></headerTitle>
    <div class="content-wrapper">

        <div class="header">
            <img :src="userInfo.userImg != null ? userInfo.userImg : 'https://p5.itc.cn/images01/20230828/318b2f2dd401486baf1c4421f9d9d30d.jpeg'"
                alt="">
                <div class="name-wrapper">
                    <img class="vip-icon" src="@/assets/img/vip.png" v-if="userInfo.vipFlag"/> 
                    <span>{{ userInfo.userName + ' ' + (userInfo.userSex == 0 ? "先生" : "女士") }}</span>
                </div>
        </div>

        <ul class="choice">
            <li class="content" @click="router.push({ name: 'addressListPage' })">
                <div class="fa fa-id-card-o"></div>
                <p>
                    送货地址
                </p>
            </li>
            <li class="vertical"></li>
            <li class="content">
                <div class="fa fa-diamond" @click="router.push({ name: 'myPointsPage' })"></div>
                <p>
                    我的积分
                </p>
            </li>
        </ul>
        <div class="button-logout">
            <button @click="logout">登出</button>
        </div>


    </div>
    <mainFooter></mainFooter>
</template>

<script setup>
import headerTitle from '@/components/headerTitle.vue';
import mainFooter from '@/components/mainFooter.vue'
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { getUserInfoRequest } from '@/js/request';
import data from '@/js/data'
let router = useRouter()
let userInfo = ref({})
getUserInfoRequest((respon) => {
    if (respon.data.code == 200) {
        userInfo.value = respon.data.detail
    } else if (respon.data.code == 400 && respon.data.detail.errorCode == 401) {
        router.push({name:'loginPage'})
    }
})
let logout=()=>{
    data.clearCache()
    router.push({name:'loginPage'})
}
</script>

<style lang="scss" scoped>
 .button-logout {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 8vw 0 8vw;

        button {
            width: 100%;
            height: 10vw;
            font-size: 3.8vw;
            font-weight: 700;
            color: #fff;
            background-color: #38CA73;
            border-radius: 4px;

            border: none;
            outline: none;
        }
    }
.content-wrapper {
    margin-top: 12vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}

.header img {
    display: block;
    border-radius: 50%;
    width: 100px;
    height: 100px;

}

.name-wrapper{
    display: flex;
    flex-direction: row;
    .vip-icon{
        width: 5vw;
        height: 5vw;
        background-size:contain ;
        margin-right: 1vw;
    }
}

.choice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    height: 30vw;
    padding: 5vw 10vw 5vw 5vw;
    background-color: #e9e9e9;
    border-radius: 10%;
}

.choice .content {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.choice .content p {
    font-size: 1.2vw;
}

.choice .vertical {
    display: block;
    width: 1px;
    height: 100%;
    border-right: solid gray 1px;
}

.choice .content div {
    font-size: 7vw;
    margin-bottom: 3vw;
}
</style>